Кликабельный фон / подложка для сайта через HTML, CSS, JS
Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств».
Ранее в блоге уже публиковались статьи по схожей тематике, например, про большую фоновую картинку у веб-страниц или создание изображения на весь экран но все эти варианты были не кликабельные. Тем не менее, для общего развития и улучшения навыков советуем их изучить.
Кликабельная подложка для сайта через HTML и CSS
Если искать решение в интернете, то найдете несколько заметок с более простой или сложной реализацией, с интеграцией брендинга под WordPress CMS и др. Скомпоновав все эти знания и советы в один код и немного его модифицировав, получили следующий результат:
<html>
<head>
<style type="text/css">
.home {
background:url('ВАШ-АДРЕС-ГРАФИКИ.jpg');
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
#ad_bg {
top: 0;
left:0;
position: absolute;
display: inline;
width: 100%;
cursor: pointer;
text-decoration: none;
}
.main-content-block {
position: relative;
z-index: 1000;
margin: 0pt auto;
width: 900px;
border: 1px solid red;
background: #fff;
}
</style>
</head>
<body class="home">
<a style="height:1200px;" id="ad_bg" href="http://ВАШ-САЙТ.ru" target="_blank"> </a>
<div class="main-content-block">
Text
</div>
</body>
</html> |
Визуально выглядит как-то так:
Важные пояснения по примеру:
- Во-первых, вы видите, что весь код собран в одном блоке, но вы можете разделить его на 2 части: отдельно HTML, а стили вынести во второй файл (style.css).
- Тег A с адресом для перехода (href) добавляется сразу после класса body. При этом в стилях у него выключается подчеркивание, ставится обычный курсор и ширина 100%. Свойство target=»_blank» откроет линк в новом окне. Не забудьте заменить URL на нужный!
- Адрес фонового изображения задается в свойстве CSS background для класса в BODY. Обязательно(!) поменяйте адрес картинки (ВАШ-АДРЕС-ГРАФИКИ.jpg) на свое значение.
- Параметр background-attachment: fixed не обязательный, он фиксирует фоновую графику при прокрутке, если вам надо. Важно, чтобы в блоке контента задавался тип позиционирования position: relative. Дабы сохранить адаптивность предлагается добавлять DIV’у вокруг основного контента margin auto.
- Все названия классов и блоков разрешается менять на свои, главное не забывайте делать это и в HTML, и в CSS одновременно.
Высота подложки сайта
В коде вы можете видеть заданную высоту height:1200px — следовательно HTML ссылка фона будет активна только в данном диапазоне. Это пригодится, когда рекламный брендинг должен располагаться исключительно в шапке сайта, а потом через полупрозрачный переход постепенно сливаться с обычным бекграундом (по которому кликать уже не получится).
В принципе, значение height при желании легко перемещается из тега А в CSS.
Внимание! Если же вам надо сделать наоборот, чтобы абсолютно вся подложка была кликабельной, то, во-первых, удаляете опцию height из HTML, а во-вторых, для идентификатора #ad_bg в стилях используете:
#ad_bg { top: 0; left:0; display: inline; width: 100%; height: 100%; position: fixed; cursor: pointer; text-decoration: none; } |
Из новых фишек здесь: высота 100% + позиционирование блока fixed. При этом значение background-attachment для бекграунда может быть как фиксированное, так и со скроллингом.
Рандомные кликабельные фоновые картинки
Рассмотрим полезную модификацию предыдущего решения, когда нужно разместить в background несколько разных фоток, которые бы менялись случайным образом при переходах по страницам проекта. Заметьте, речь идет не о слайдшоу, а про обновление веб-страниц. Принцип реализации следующий.
В CSS-файле создаете несколько стилей с разными background:url (photo1.jpg, photo2.jpg и photo3.jpg):
.home1 { background:url('photo1.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } .home2 { background:url('photo2.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } .home3 { background:url('photo3.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } |
Далее перед body добавляете скрипт случайной выборки параметров из массива:
<?php $banners[1] = array('home1','http://site1.com/'); $banners[2] = array('home2','http://site2.com/'); $banners[3] = array('home3','http://site3.com/'); $rnd = rand(1,3); ?> <body class="<?php echo $banners[$rnd][0]; ?>"> <a style="height:1200px;" id="ad_bg" href="<?php echo $banners[$rnd][1]; ?>" target="_blank"> </a> <div class="main-content-block"> Text </div> </body> |
Суть следующая: каждый раз при генерации страницы выбирается рандомное число от 1 до 3х, а затем оно подставляются в код и указывает порядковый номер ячейки массива.
Здесь важно:
- задать в переменной banners линки, куда пользователь будет переходить при клике на фоновое изображение (вместо site1, site2 и site3);
- укажите правильные адреса картинок в background:url;
- не забудьте скопировать остальную часть стилей из прошлого примера (#ad_bg, .main-content-block);
- меняйте значение высоты подложки height:1200px, если потребуется.
Внимание! Учитывая наличие PHP функций, работать данная конструкция будет только для исполняемых файлов с расширением .php (в стандартной .html странице не запустится).
Кликабельный фон сайта с ссылкой через Javascript
Если по каким-то причинам первый способ решения задачи вам не подошел, то есть парочка на JS. Следует заметить, что в примерах ниже используются совсем другое оформление, поэтому визуальный результат тестирования у вас получится несколько иной. Однако в данном случае важным является именно Javascript, — все остальное подправите уже после его внедрения.
1. Итак, вариант1 найден здесь, он максимально компактный. Сначала добавляете HTML:
<body>
<img src="http://ВАШ-САЙТ.com/НАЗВАНИЕ-КАРТИНКИ.jpg" class="ad" alt="" rel="http://ВАШ-САЙТ.com" />
<div class="contents">
<span>testing</span>
</div>
</body> |
Затем стили:
img{position:absolute;display:block;top:0;left:0;z-index:1;} div{position:relative;z-index:1000;} span{color:#f00;} |
Ну, и дальше сам скрипт. Можете сделать из него отдельный JS-файл либо прописать сразу в body:
<body>
<script type="text/javascript">
$("img.ad").click(function(e){
window.location = $(this).attr("rel");
});
</script>
</body> |
2. Исходник второго решения, к сожалению, не сохранился, остался лишь код:
<html>
<head>
<style type="text/css">
.ad-banner-image {
position: absolute;
display: block;
left: 0pt;
z-index: 1;
width: 100%;
height: 1252px;
background: url('ВАШ-АДРЕС-ГРАФИКИ.jpg') no-repeat scroll center top transparent; top: 0pt; cursor: pointer;
}
.main-content-block{
position: relative;
z-index: 1000;
margin: 0pt auto;
width: 900px;
border: 1px solid red;
background: #fff;
}
</style>
</head>
<body>
<div class="ad-banner-image" onclick="window.open(this.href, '_self'); window.open('http://ВАШ-САЙТ.ru'); return false;"></div>
<div class="main-content-block">
Text
</div>
</body>
</html> |
Здесь для события onclick был добавлено открытие нового окна с указанным URL. Его вместе с адресом подложки под сайт следует заменить на свои. Оформление также следует подправить под себя. Оба метода тестировались, и на момент написания поста все работало.
Реализация на Вордпресс и доп.нюансы
Во-первых, пару слов следует сказать про добавление ссылки на фон в одной из самых популярных CMS систем. Всю информацию по теме найдете в статье про кликабельное фоновое изображение WordPress сайта где описано 2 метода:
- через HTML/CSS — он совпадает с нашим примером в начале публикации;
- с помощью соответствующих модулей.
Как оказалось, сейчас в системе нет на 100% подходящих бесплатных плагинов. Ранее в Дизайн Мании мы рассказывали о двух возможных вариантах по теме, но один из них (Background Manager) уже недоступен/удален.
Что же делать? Если у вас недостаточно навыков для написания модуля с нуля, то следует выбрать максимально подходящий по смыслу и преобразовать его под свои нужды. К сожалению, без дополнительных навыков веб-разработки просто не обойтись. Вы можете взять:
- WP-Backgrounds Lite — выполняет установку полноэкранного кликабельного фона на страницах/постах блога. Вам придется сделать так, чтобы он реализовывал функцию и для остального веб-проекта.
- Backdrop — его преимущество в задании всех параметров через Настройщик шаблона (находящийся в админке). Нужно добавить в исходник плагина еще одну опцию и подправить вывод результирующего HTML-кода.
Также советуем почитать статью о брендированной рекламной подложке — почему этот формат интересует рекламодателей, какие нюансы и вопросы возникают при его внедрении и т.п.
Если вы знаете еще какие-то варианты как сделать фон ссылкой, делитесь ими в комментариях.
Загрузка...
Background Manager позволяет установить фон для каждой страницы или записи, можно выбрать 1 из предложенных вариантов или использовать картинку. Невозможно вставить ссылку с помощью этого плагина.
В WP-Backgrounds Lite есть поле для ссылки, но почему-то не работает.
Остап, я использовал только Background Manager, там со ссылкой специфическая ситуация. Можно активировать некий элемент [ + ] в самом низу страницы, на который и вешается ссылка. Что-то вроде «почитать подробнее». Нужно будет дописать об этом в статье. С WP-Backgrounds Lite не работал, к сожалению.
Спасибо за дополнение к статье, плохо, конечно, что модули такие корявые. Возможно, сейчас есть и другие плагины, вопрос рассматривал полгода назад где-то.
Остап, по поводу второго плагина нашел — some features (i.e. the fullsize background link) will not work with all themes. Зависит от структуры шаблона.
По Background Manager, кстати, двоякое ощущение. Раз я делал полноценный обзор модуля, то наверняка тогда линк с фона работал. Поскольку я искал подходящее решение для одной задачи. Возможно, для новых версий ВП или некоторых шаблонов, он глючит. В любом случае, теперь это уже не особо актуально, т.к. Background Manager у меня не получается найти на официальном сайте.
Может я что то не так делаю, но у меня получается весь сайт кликабельный. Как исправить. Пробую сделать по первому варианту?
Андрей, сложно давать советы на расстоянии. Тут 2 варианта: 1) сделать еще раз все настройки с самого начала внимательно. 2) Если внедряете на готовом сайте, добавлять код постепенно и по ходу правок смотреть что работает, что нет — так сможете найти проблему. В коде опция z-index = 1000 располагает основной блок контента main-content-block поверх основных, в том числе и фона. Если контент кликабельный, то можно поискать ошибку в этом направлении.
Спасибо, за статью. а при первом варианте брендирования этот код в стайл.цсс надо пихать?
miraza, в первом примере в коде используется тег style, позволяющий добавить стили CSS прямо в HTML файл. Но правильно будет разместить все стили в стайл.ксс — вы правильно заметили. Просто так было нагляднее их продемонстрировать и проще проверить работоспособность кода.
Админ, как в первый вариант ротацию сделать ?
Чтобы менялись при перезагрузке фоны+к каждому фона привязана его ссылка.
Есть такие варианты ?
Adept, если сайт на вордпресс, то можно поискать плагины (в том числе попробовать 2 последних). Если на другой CMS или просто без нее, тогда потребуется скрип вывода случайных кодов. Когда-то давно в другом блоге я публиковал статью с примером реализации рандомного контента — там делается через файлы, хотя, наверное, это не самый эффективный метод.
На вордпресс сайт, плагины эти не выполняют свои функции. По крайней мере с моей темой точно.
Adept, тогда придется искать PHP код для создания случайной выборки из нескольких текстовых фрагментов и внедрить его в код первого варианта, поставляя разные результаты вместо параметра href ссылки и фоновой картинки.
Блог отличный, а блогер ответственный! Высших позиций Вам!)
Adept, обновил статью и добавил код для рандомного фона. Только его нужно вставлять в PHP файл, например в шаблон какой-то и т.п. Можно, в принципе, просто переименовать html файл в php, если уж сильно нужно.
Круто! Автору огромное спасибо, надеюсь многим пригодится этот код, ибо нагуглить рабочий вариант трудновато) Пошел тестировать.
ПамагитЕ! Всё делал по инструкции, только картинки рандомные криво отображаются, а ссылки всё норм. Я новичек и где-то с body у меня заминка наверно.
Александр, нужно внимательно все еще раз повторить, к сожалению. я не могу подсказать где именно у вас ошибка. Там после рандомного кода есть несколько нюансов, например, нужно в CSS включать стили #ad_bg, .main-content-block, указанные в предыдущем примере.
Здравствуйте!
Спасибо за статью! Изменилась ли ситуация с двумя последними плагинами? Может появилось что-то новое, чтобы более-менее безболезненно произвести брендирование сайта на wordpress?
заранее спасибо!
Александр, эффективнее всего решать задачу через CSS стили. Из плагинов рабочим остался только WP-Backgrounds Lite, альтернативных модулей, к сожалению, не особо много.
Подскажите, как с помощью плагина WP-Backgrounds Lite задать фон для главной и страниц категорий?
Чтобы решить проблему с кликабельностью фона в плагине Background Manager нужно здесь /wp-content/plugins/background-manager/resources/css/pub.css
Найти это: #myatu_bgm_img_group{z-index:-1997}
Заменить на это: #myatu_bgm_img_group{z-index:1}
Мне помогло.
Виталий, спасибо за дополнение статьи. Лучше всего правки в файлы модуля напрямую не вносить — т.к. при обновлении они будут перезписаны. Указанные вами стили следует перенести в style.css для установленного шаблона.
По поводу отображения на главной/ в категориях не уверен, что можно это как-то реализовать. В вордпресс есть условные операторы для шаблона, позволяющие выводить информацию только на главной, но в модуле WP-Backgrounds Lite нет никаких шорткодов или функций вывода чтобы для них добавить эти самые условия. Тут вариант только «допиливать» php код плагина.
Работает отлично, обошелся без a. Пока скрипт для ИЕ6 задействовать не стал, решил оставить эффект наведения для нормальных браузеров. Спасибо за помощь!
Здравствуйте. Спасибо за статью. Все сделал как ниписано. Способ через HTML и CSS. Но почему то у меня кликабельное шапка и футер, а края основного body нет. Помогите с вопросом.
Triste, я уже отписался в другом блоге по этому поводу — тут нужно пробовать на самом простом примере, а потом добавлять в него новые элементы или аккуратно вставлять в готовую тему… На самом деле в уже существующем макете какие-то стили могут перекрывать действий данного примера и отсюда возникают глюки — в каждом случае все индивидуально.
Спасибо. Такой вопрос. Как сделать, что бы задний фон адаптировался под другие устройства. Смартфоны и планшеты?
Triste, учитывая, что картинки там заданы через CSS, то их легко можно подменять на фон или изображения поменьше классическим методом создания адаптивной версии по типу:
@media (max-width: 600px) {... ваш код ...
}
Доброго времени!
Помогите чайнику… сайт делался на ucoz ни как не пойму куда вставить коды для рандомной кликабельной подложки.
Alexey, я с ucoz не сталкивался, поэтому сложно сказать куда именно там надо вставлять код. Это должен быть файл шаблона, отвечающий за шапку — т.е. там где блок HEAD и начало BODY. Если в ucoz можно редактировать файлы шаблона.